<template>
    <div class="home">
        <Headers>
          <a slot="icon1" href="javascript:;" class="header-left" @click="clickMenu"><i class="iconfont icon-caidan01"></i></a>
          <b slot="text">{{headerName}}</b>
          <a slot="icon2" href="javascript:;" class="header-right"><i class="iconfont icon-zhifeiji"></i></a>
        </Headers>
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
            <transition-group class="home-ul" tag="ul" enter-active-class="animated bounceInUp" leave-active-class="animated bounceInUp">
                <li :key="item" class="home-item" v-for="item in cnodeList">
                    <router-link :to=" '/detail/' + item.id" class="home-link">
                      <h3 class="title">
                       <span class="tag" v-if="item.top">置顶</span>
                       <span class="tag" v-else-if="item.good">精华</span>
                       <span class="tag gray" v-else-if="item.tab == 'share'">分享</span>
                       <span class="tag gray" v-else-if="item.tab == 'ask'">问答</span>
                       <span class="tag gray" v-else-if="item.tab == 'job'">招聘</span>
                       <b class="txt">{{item.title}}</b>
                      </h3>
                      <div class="content">
                        <div class="content-img">
                          <img :src="item.author.avatar_url" alt="">
                        </div>
                        <div class="content-txt">
                          <p><span class="fr"><i class="green">{{item.reply_count}}</i>/{{item.visit_count}}</span><span class="name">{{item.author.loginname}}</span></p>
                          <p class="text-right">{{item.last_reply_at | getDateDiff}}</p>
                        </div>
                      </div>
                    </router-link>
                </li>
            </transition-group>
        </mt-loadmore>
        <v-menu :menu="isShowMenu" @transferMenu="getMenu" @childMenuClick="getMenuList"></v-menu>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
        <Returntop></Returntop>
    </div>
</template>
<script>
import {returnAppointPos} from '../assets/js/utils.js';
import  {Loadmore} from 'mint-ui';
import  {Indicator}  from 'mint-ui';
import Headers from './headers';
import Menu from './menu';
import Returntop from './returnTop';
import axios from 'axios'
const URL = 'http://www.vue-js.com/api/v1/';
export default {
    name: 'home',
    data () {
        return {
            cnodeList: [],
            allLoaded: false,
            recordScrollPosition: 0,
            headerName: '全部',      
            tab: 'all',             
            page: 1,                
            isEmpty: true,          
            mdrender: false,        
            isShowMenu: false,      
        }
    },
        components: {
        mtLoadmore: Loadmore,
        Headers,
        vMenu: Menu,
        Returntop
    },
    // methods:{
    //         getData(tab){
    //             console.log(tab)
    //             this.axios.get('https://www.vue-js.com/api/v1/topics'+tab)
    //             .then(data=>{
    //                 console.log(data);
    //                 this.dataList= data.data.data;
    //                 if(this.dataList.length==0){
    //                     this.kong=true;
    //                 }else{
    //                     this.kong=false;
    //                 }
    //                 console.log(this.dataList);                           
    //             }).catch(err=>{               
    //                 console.log(err)
    //             })
    //         },
    //         concatData(tab,page){
    //             console.log(tab)
    //            this.axios.get('https://www.vue-js.com/api/v1/topics'+tab+'&page='+page)
    //             .then(data=>{
    //                 console.log(data);
    //                 this.dataList=this.dataList.concat(data.data.data);
    //                 if(this.dataList.length==0){
    //                     this.kong=true;
    //                 }else{
    //                     this.kong=false;
    //                 }
    //                 console.log(this.dataList);                           
    //             }).catch(err=>{               
    //                 console.log(err)
    //             })
    //         },
    //         loadMore(){
    //             this.page++;
    //             this.concatData(this.tab,this.page);
    //         },
    //         play(index){
    //             for(var i=0;i<this.data.length;i++){
    //                 this.data[i].mark=false;
    //             }
    //             this.data[index].mark=true;
    //         },
    //    },
      //  created(){
      //       this.getData(this.tab,this.page)       
      //  },

    mounted () {
      Indicator.open();
      console.log(URL)
      this.ajax(`${URL}topics?page=${this.page}&mdrender=${this.mdrender}&tab=${this.tab}`, () => {
        console.log(this.ajax)
        Indicator.close();
      });
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        document.documentElement.scrollTop = document.body.scrollTop = vm.recordScrollPosition;
      });
    },
    beforeRouteLeave (to, from, next) {
      this.recordScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
      next();
    },
    methods: {
        clickMenu () {
          this.isShowMenu = !this.isShowMenu;
          document.body.addEventListener('touchmove',this.prevent,false);
        },
        prevent(event) {
           event.preventDefault();
        },
        getMenu (msg) {
          this.isShowMenu = msg;
          document.body.removeEventListener('touchmove',this.prevent,false);
        },
        getMenuList (msg) {
          if (!msg) return;
          switch (msg) {
            case 'all':
              this.headerName = '全部';
              break;
            case 'good':
              this.headerName = '精华';
              break;
            case 'share':
              this.headerName = '分享';
              break;
            case 'ask':
              this.headerName = '问答';
              break;
            case 'job':
              this.headerName = '招聘';
              break;
            default :
              this.headerName = '全部';
          }
          this.tab = msg;
          this.getMenu();
          this.reductionDefault();
          returnAppointPos(0);
          Indicator.open();
          this.ajax(`${URL}topics?page=${this.page}&mdrender=${this.mdrender}&tab=${this.tab}`,
           () => {
            Indicator.close();
          });
        },
        loadTop () {
          this.reductionDefault();
          this.ajax(`${URL}topics?page=${this.page}&mdrender=${this.mdrender}&tab=${this.tab}`,() => {
            this.$refs.loadmore.onTopLoaded();
          });

        },
        loadBottom () {
          this.page++;
          this.ajax(`${URL}topics?page=${this.page}&mdrender=${this.mdrender}&tab=${this.tab}`,() => {
            this.$refs.loadmore.onBottomLoaded();
          });
        },
        reductionDefault () {
          this.page = 1;
          this.limit = 10;
          this.cnodeList = [];
        },
        ajax (url, cb) {
           this.$http.get(url).then( res => {
            if (res.status === 200){
                if(!this.isEmpty) {
                    this.cnodeList = this.cnodeList.concat(res.body.data);
                } else {
                    this.cnodeList = res.body.data;
                    this.isEmpty = false;
                }
                cb && cb(res);
            }
          }, error => {
            console.log(error);
          });
        }
    },
}
</script>

<style scoped>
.gray{
  background:#ccc !important;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-active {
  opacity: 0;
  transform: translateY(30px);
}
.fr{
  float: right;
}
.green{
  color: #61b7a0;
}
.text-right{
  text-align: right;
}
.home{
  padding-top: 45px;
  background-color: #f7f7f7;
}
.home-item{
    display: block;
    border-bottom: 1px solid #ddd;
   }
     .home-link{
      display: block;
      padding: 15px;
     }
     .title{
        display: flex;
     }
     .tag{
          display: block;
          padding: 4px 8px;
          background-color: #61b7a0;
          border-radius: 3px 3px 0 0;
          color: #fff;
          font-size: 12px;
        }
        .txt{
          display: block;
          margin-left: 10px;
          flex: 1;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #2c3e50;
          font-size: 16px;
        }
      
      .content{
        display: flex;
        margin-top: 10px;
        }
        .content-img{
          width: 44px;
          height: 44px;
        }
         img{
            display: block;
            width: 100%;
            border-radius: 50%;
          }
        .content-txt{
          flex: 1;
          padding-left: 7px;
        }
         .content-txt p{
            line-height: 20px;
            font-size: 12px;
          }
         .content-txt i{
            font-style: normal;
          }
         .content-txt .name{
            color: #666;
          }
         .content-txt .text-right{
            color: #999;
          }
    
</style>
